<template>
  <div class="user-txt-root">
    <div class="txt-con">
      <!--用户名及按钮容器-->
      <div class="name--bt-con">
        <!--用户名-->
        <span class="name-con">{{name}}</span>
        <i class="el-icon-edit" @click="updateUserName"></i>

      </div>
      <!--用户所属组织名容器-->
      <div class="team-con">
        <span>{{orgName}}</span>
      </div>
    </div>

  </div>
</template>

<script>
import store from "@/store";
import {updateUserInfo} from "@/api/sysUser";

export default {
  data() {
    return {}
  },
  computed: {
    name() {
      return this.$store.getters.name
    },
    orgName() {
      return store.getters.orgName
    }
  },
  methods: {
    updateUserName() {
      this.$prompt('请输入新名称', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputValue: this.name,
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: "用户名称长度必须介于 1 和 20 之间"
      }).then(({value: nickName}) => {
        updateUserInfo({nickName}).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.$store.commit('SET_NAME', nickName);
        });
      }).catch(() => {
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.user-txt-root {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .txt-con {
    width: 100%;
    height: 100%;
    margin-right: 10px;
    font-size: $title-size;
    font-weight: 700;
    letter-spacing: 0px;
    //设置内部容器位置
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .name--bt-con{
      //设置内部元素位置
      display: flex;
      align-items: center;
      span{
        margin-right: 5px;
        font-size: $second-font-size;

      }
      i{
        cursor: pointer;
        font-size: $second-font-size;
        color: $head-back-blue;
      }
    }
    .team-con{
      font-size: $thirdly-font-size;
      color: rgba(96, 98, 102, 1);
    }
  }


}
</style>
